<template>
    <div>
        <div class="head">
            <div class="oneicon">
                <el-icon size="50px" @click="toEvent">
                    <Memo />
                </el-icon>
                <el-text style="font-size: 15px;font-weight: bold;">事件</el-text>
            </div>
            <div class="oneicon">
                <el-icon size="50px" @click="toMaterial">
                    <Box />
                </el-icon>
                <el-text style="font-size: 15px;font-weight: bold;">物资</el-text>
            </div>
            <div class="oneicon">
                <el-icon size="50px" @click="toCity">
                    <School />
                </el-icon>
                <el-text style="font-size: 15px;font-weight: bold;">城市</el-text>
            </div>
            <div class="oneicon">
                <el-icon size="50px" @click="toProcedure">
                    <Operation />
                </el-icon>
                <el-text style="font-size: 15px;font-weight: bold;">流程</el-text>
            </div>
            <div class="oneicon">
                <el-icon size="50px" @click="toReport">
                    <Edit />
                </el-icon>
                <el-text style="font-size: 15px;font-weight: bold;">接报</el-text>
            </div>
            <div class="oneicon">
                <el-icon size="50px" @click="toEnterprise">
                    <OfficeBuilding />
                </el-icon>
                <el-text style="font-size: 15px;font-weight: bold;">企业</el-text>
            </div>
        </div>

        <div class="main">
            
            <el-input v-model="input" style="max-width: 600px" placeholder="请输入">
                <template #prepend>
                    <el-select v-model="select" placeholder="搜索方式" style="width: 115px">
                        <el-option label="接报ID" value="接报ID" />
                        <el-option label="报警人" value="报警人" />
                        <el-option label="处理状态" value="处理状态" />
                        <el-option label="最后更新者" value="最后更新者" />
                            
                    </el-select>
                </template>
                <template #append>
                    <el-button :icon="Search" @click="Searchby"/>
                </template>
            </el-input>
            <el-scrollbar height="400px" >
                <el-icon @click="refresh"><Refresh /></el-icon><el-text>刷新</el-text><br>
                <div v-for="report in reportArr" :key="report.reportID" class="scrollbar-demo-item" style="height: 190px;">
                    <el-text>接报ID:{{ report.reportID }}</el-text>
                    <br />
                <div class="row">
                    <div>
                        <el-icon>
                            <User />
                        </el-icon>
                        报警人:{{ report.reporter }}
                    </div>
                    <div>
                        <el-icon>
                            <iphone />
                        </el-icon>
                        报警人电话:{{ report.reporterPhone }}
                    </div>
                </div>
                <el-icon><OfficeBuilding /></el-icon>
                风险企业ID:{{ report.enterpriseID }}<br>
                <el-icon>
                    <Bell />
                </el-icon>
                流程类型: {{ report.eventType }}
                <br>
                
                <el-icon>
                    <location />
                </el-icon>
                
                处理状态:
                <span :style="fontColorStyle(report)">●{{ report.reportState }}</span><br>
              
                <el-icon>
                    <Coordinate />
                </el-icon>
                最后更新者:
                {{ report.lastUpdater }}<br>

                <el-icon>
                    <ChatDotSquare />
                </el-icon>
                备注:
                {{ report.remark }}<br>
                <el-icon>
                    <Calendar />
                </el-icon>
                最后更新时间:{{ report.reportTime }}
            
                </div>
                <el-icon><Service /></el-icon><el-text>客服</el-text> 
            </el-scrollbar>
        </div>
    </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { ref, inject ,computed } from "vue";

import {
  Refresh,
  Service,
  Memo,
  ShoppingTrolley,
  School,
  Operation,
  Edit,
  OfficeBuilding,
  HomeFilled,
  House,
  Box,
  User,
  Close,
  Iphone,
  Location,
  Tickets,
  ChatDotSquare,
  Calendar,
  Bell,
  Coordinate,
  Search,
} from "@element-plus/icons-vue";
const route = useRoute();
const router = useRouter();
const axios = inject("axios");

const user = sessionStorage.getItem("user");
let userobj = JSON.parse(user);
let userdata = userobj._value;

let reportArr = ref([]);
let select = ref();
let input = ref();

const refresh = () => {
  console.log(1);
  location.reload();
};
const init = () => {
  axios
    .post("/Worker/listAllReport", {})
    .then((response) => {
      reportArr.value = response.data;
    })
    .catch((error) => {
      console.log(error);
    });
};
init();

const fontColors = ref({
  待审批: "blue",
  已驳回: "red",
  专家审批中: "rgb(3, 127, 36)",
  指挥人员审批中: "rgb(2, 164, 164)",
  审核通过: "green",
});

const fontColorStyle = computed(() => {
  return (repoInfo) => ({
    color: fontColors.value[repoInfo.reportState] || "black",
  });
});

const Searchby = () => {
  console.log(select.value);
  console.log(input.value);
  if (select.value == "报警人") {
    axios
      .post("/Worker/listReportByReporter ", {
        reporter: input.value,
      })
      .then((response) => {
        reportArr.value = response.data;
        console.log(reportArr.value);
      })
      .catch((error) => {
        console.log(error);
      });
  } else if (select.value == "处理状态") {
    axios
      .post("/Worker/listReportByState ", {
        reportState: input.value,
      })
      .then((response) => {
        reportArr.value = response.data;
        console.log(reportArr.value);
      })
      .catch((error) => {
        console.log(error);
      });
  } else if (select.value == "接报ID") {
    axios
      .post("/Worker/listReportByReportID ", {
        reportID: input.value,
      })
      .then((response) => {
        reportArr.value = response.data;
        console.log(reportArr.value);
      })
      .catch((error) => {
        console.log(error);
      });
  } else if (select.value == "最后更新者") {
    axios
      .post("/Worker/listReportByLastUpdater ", {
        lastUpdateUser: input.value,
      })
      .then((response) => {
        reportArr.value = response.data;
        console.log(reportArr.value);
      })
      .catch((error) => {
        console.log(error);
      });
  }
};

const toEvent = () => {
  router.push("/workerMainPage/workerEventPage");
};
const toCity = () => {
  router.push("/workerMainPage/workerCityPage");
};
const toMaterial = () => {
  router.push("/workerMainPage/workerMaterialPage");
};
const toEnterprise = () => {
  router.push("/workerMainPage/workerEnterprisePage");
};
const toReport = () => {
  router.push("/workerMainPage/workerReportPage");
};
const toProcedure = () => {
  router.push("/workerMainPage/workerProcedurePage");
};
</script>

<style scoped>
.el-descriptions {
  margin-top: 20px;
}

.cell-item {
  display: flex;

  align-items: center;
}

.margin-top {
  margin-top: 5px;
}

.oneicon {
  width: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.head {
  display: flex;
  padding: 20px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.tail {
  top: 590px;
  display: flex;
  flex-direction: row;
  padding-left: 40px;
  padding-right: 40px;
  justify-content: space-between;
  position: fixed;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.all {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  /* 100%窗口高度 */
  height: 100vh;
  /* 弹性布局 居中 */
  align-items: center;
  /* 渐变背景 */
  background: linear-gradient(200deg, #c5ebe3, #a9c1ed);
  /* 溢出隐藏 */
  overflow: hidden;
}

.home {
  width: 90px;
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  align-items: center;
}

.mine {
  width: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 30px;
  margin-right: 30px;
}

.exit {
  width: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 10px;
}

.main {
  margin: 10px;
  overflow-y: auto;
}

.square ul li {
  position: absolute;
  border: 1px solid #fff;
  background-color: #fff;
  width: 15px;
  height: 15px;
  list-style: none;
  opacity: 0;
}

.square li {
  top: 30vh;
  left: 30vw;
  /* 执行动画：动画名 时长 线性的 无限次播放 */
  animation: square 10s linear infinite;
}

.square li:nth-child(2) {
  top: 80vh;
  left: 5vw;
  /* 设置动画延迟时间 */
  animation-delay: 2s;
}

.square li:nth-child(3) {
  top: 60vh;
  left: 45vw;
  /* 设置动画延迟时间 */
  animation-delay: 4s;
}

.square li:nth-child(4) {
  top: 40vh;
  left: 70vw;
  /* 设置动画延迟时间 */
  animation-delay: 6s;
}

.square li:nth-child(5) {
  top: 80vh;
  left: 10vw;
  /* 设置动画延迟时间 */
  animation-delay: 8s;
}

.circle li {
  bottom: 0;
  left: 15vw;
  /* 执行动画 */
  animation: circle 10s linear infinite;
}

.circle li:nth-child(2) {
  left: 35vw;
  /* 设置动画延迟时间 */
  animation-delay: 2s;
}

.circle li:nth-child(3) {
  left: 55vw;
  /* 设置动画延迟时间 */
  animation-delay: 6s;
}

.circle li:nth-child(4) {
  left: 75vw;
  /* 设置动画延迟时间 */
  animation-delay: 4s;
}

.circle li:nth-child(5) {
  left: 70vw;
  /* 设置动画延迟时间 */
  animation-delay: 8s;
}

/* 定义动画 */
@keyframes square {
  0% {
    transform: scale(0) rotateY(0deg);
    opacity: 1;
  }

  100% {
    transform: scale(5) rotateY(1000deg);
    opacity: 0;
  }
}

@keyframes circle {
  0% {
    transform: scale(0) rotateY(0deg);
    opacity: 1;
    bottom: 0;
    border-radius: 0;
  }

  100% {
    transform: scale(5) rotateY(1000deg);
    opacity: 0;
    bottom: 90vh;
    border-radius: 50%;
  }
}

.scrollbar-demo-item {
  height: 180px;
  margin: 10px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
}

.row {
  display: flex;
  justify-content: space-between;
}

.fresh_txt,
.load_txt {
  text-align: center;
  color: #ccc;
}
.ani {
  transition: all 0.2s;
}
</style>